<template>
  <div id="app">
    <transition name="down">
      <music-player v-show="playerVisible"></music-player>
    </transition>
    <music-player-mini v-if="miniPlayerVisible"></music-player-mini>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  import MusicPlayerMini from "./components/MusicPlayerMini";
  import MusicPlayer from "./components/MusicPlayer";
  export default {
    name: 'App',
    components: {
      MusicPlayerMini,
      MusicPlayer
    },
    computed: {
      miniPlayerVisible(){
        return this.$store.getters.miniPlayerVisible;
      },
      playerVisible(){
        return this.$store.getters.playerVisible;
      }
    },
    mounted: function() {
      // 页面开始加载时修改font-size
      const html = document.getElementsByTagName("html")[0];
      const oWidth = document.body.clientWidth || document.documentElement.clientWidth;
      // 这里的750是指设计图的大小,自己根据实际情况改变
      html.style.fontSize = oWidth / 750 * 100 + "px";
      // console.log('1rem = ', html.style.fontSize);
    }
  }
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
.down-enter-active{
  animation: downAni 1s;
}
.down-leave-active{
  animation: upAni 1s;
}
@keyframes downAni{
  0%{
    opacity: 0;
    transform: translateY(-100vh);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes upAni{
  0%{
    opacity: 1;
    transform: translateY(0);
  }
  100%{
    opacity: 0;
    transform: translateY(-100vh);
  }
}
</style>
